import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, FlatList, Image, Animated } from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { ItemCpt } from './_components/ItemCpt';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import StorageHelper from '../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../config/storage';
const scale = GLOBAL.SCALE;

export class OpportunityCustomers extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '商机客户认领',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: {  // 头部整体样式 
				elevation: 0,
				borderBottomWidth: 0,
				backgroundColor: style.color.themeColor
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			status: 'loading',
			listData: [{}],
			refreshIcon: false, // 下拉刷新图标
			rightObj: new Animated.Value(-375 * scale),
			onOffAnimated: true
		};
		this.pageParams = {
			enterpriseName: '',
			mobile: '',
			dispalyAllMobile: 'N'
		};
		this.reload = true;
		this.searchKey = '';
		this.roles;
	}

	async componentWillMount () {
		const userInfoJson = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		const userInfo = JSON.parse(userInfoJson);
		console.log(userInfo)
		if (userInfo.userRoles) {
			userInfo.userRoles.map((item) => {
				if (item.roleCode === 'ROLE_APP_ORDER_ORGAN_QUERY') {
					this.pageParams.dispalyAllMobile = 'Y'
				}
			})
		}
		if (userInfo.isBizer === '1') {
			this.roles = 'salesman'
		}
		this._initPage();
	}


	async _initPage () {
		this.setState({
			status: this.reload ? 'loading' : 'data',
			refreshIcon: !this.reload
		})
		this.pageParams.enterpriseName = this.searchKey
		this.pageParams.mobile = this.searchKey
		let res = await HTTP.POST(API_GENERATE(API.ENTERPRISE_APPLY_LIST_WAIT), this.pageParams);
		console.log(res)
		if (res) {
			this.setState({
				status: res.length > 0 ? 'data' : 'empty',
				listData: res,
				refreshIcon: false,
			})
		} else {
			this.setState({
				refreshIcon: false,
				status: 'error'
			})
		}
	}


	_returnItem = (data) => {
		return <ItemCpt
			data={data.item}
			leftBtnsList={{
				btnFun: () => { this.setState({ status: 'loading' }); this._initPage() },
			}}
			roles={this.roles}
		/>
	}

	reloadPage = () => {
		this.reload = true;
		this._initPage();
	}

	_onErrorRefresh = () => {
		this._initPage();
	}


	render () {
		let { status, listData, refreshIcon } = this.state;
		return (
			<View style={styles.container}>
				<View style={styles.headBox}>
					<View style={styles.searchBox}>
						<View style={styles.search}>
							<Image source={require('../../../imgs/global/whiteSearch.png')} style={styles.searchIcon} />
							<TextInput
								style={styles.searchInput}
								underlineColorAndroid='transparent'
								placeholder={"请输入企业名称/手机号"}
								placeholderTextColor="rgba(255, 255, 255,1)"
								maxLength={30}
								returnKeyType={'search'}
								defaultValue={this.searchKey}
								onChangeText={(txt) => { this.searchKey = txt; }}
								onSubmitEditing={() => { this.reloadPage(); }}
							/>
						</View>
					</View>
				</View>
				{status == 'data' ?
					<View style={styles.box}>
						<FlatList
							data={listData}
							renderItem={
								this._returnItem
							}
							refreshing={refreshIcon}
							onRefresh={() => { this.reloadPage() }}
						/>
					</View>
					:
					(<View style={{ flex: 1 }}>
						<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.reloadPage} />
					</View>)
				}
			</View >
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		position: 'relative',
		backgroundColor: style.color.bgGray,
		paddingBottom: 30 * scale
	},
	topBox: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	headBox: {
		paddingTop: 16 * scale,
		// height: 140 * scale,
		backgroundColor: style.color.themeColor
	},
	topTitle: {
		fontSize: 18 * scale,
		color: '#fff'
	},
	searchBox: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		// marginTop: 32 * scale,
		marginBottom: 38 * scale
	},
	search: {
		flexDirection: 'row',
	},
	searchInput: {
		height: 37 * scale,
		width: 253 * scale,
		paddingLeft: 70 * scale,
		paddingRight: 12 * scale,
		backgroundColor: 'rgba(255, 255, 255, .18)',
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		paddingVertical: 0,
		position: 'relative',
		borderRadius: 8 * scale,
		color: '#fff',
	},
	searchIcon: {
		width: 18 * scale,
		height: 18 * scale,
		position: 'absolute',
		left: 24 * scale,
		top: 10 * scale,
		zIndex: 9,
		opacity: 0.8,
	},
	searchFilter: {
		fontSize: 25 * scale,
		color: '#fff',
		marginLeft: 17 * scale,
	},
	box: { flex: 1, justifyContent: 'center', alignItems: 'center' },
	filter: {
		position: 'absolute', height: '100%', width: '100%', width: -265 * scale
	},
	filterBox: { position: 'absolute', height: '100%', right: 0, backgroundColor: 'rgba(0, 0, 0, .3)', width: '100%' },
})